<template>
	<view class="setting-wrapper">
		<view class="setting-item">
			<view class="setting-desc fz28 gray-color mb24">
				账号
			</view>
			<view class="setting-content conteainer-public-style" style="padding:0 30rpx">
				<view class="setting-content-item flex-c-s" @click="setInfo">
					<view class="settimg-name fz28">
						修改资料
					</view>
					<uni-icons type="forward" color="#8e8e8e" size="20"></uni-icons>
				</view>
				<view class="setting-content-item flex-c-s" @click="setPaymentPwd">
					<view class="settimg-name fz28">
						修改支付密码
					</view>
					<uni-icons type="forward" color="#8e8e8e" size="20"></uni-icons>
				</view>
			</view>
		</view>
		<view class="setting-item">
			<view class="setting-desc fz28 gray-color mb24">
				关于
			</view>
			<view class="setting-content conteainer-public-style">
				<view class="setting-content-item flex-c-s" @click="userAgreement">
					<view class="settimg-name fz28">
						用户协议
					</view>
					<uni-icons type="forward" color="#8e8e8e" size="20"></uni-icons>
				</view>
				<view class="setting-content-item flex-c-s" @click="policy">
					<view class="settimg-name fz28">
						隐私政策
					</view>
					<uni-icons type="forward" color="#8e8e8e" size="20"></uni-icons>
				</view>
				<view class="setting-content-item flex-c-s" @click="recharge">
					<view class="settimg-name fz28">
						用户充值政策
					</view>
					<uni-icons type="forward" color="#8e8e8e" size="20"></uni-icons>
				</view>
			</view>
		</view>
		
		<view class="setting-item">
			<view class="setting-desc fz28 gray-color mb24">
				其他
			</view>
			<view class="setting-content conteainer-public-style">
				<view class="setting-content-item flex-c-s" @click="aboutUs">
					<view class="settimg-name fz28">
						APP介绍
					</view>
					<uni-icons type="forward" color="#8e8e8e" size="20"></uni-icons>
				</view>
				<view class="setting-content-item flex-c-s">
					<view class="settimg-name fz28">
						版本更新
					</view>
					<view>
						{{ systemInfos }}
					</view>
				</view>
			</view>
		</view>
		
		<button class="logout-btn public-large-btn" @click="logoutHandle">退出登录</button>
	</view>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { logout } from '@/http/my'
import { onShow } from '@dcloudio/uni-app'

export default defineComponent({
	setup() {
		const state = reactive({
			systemInfos: '',
		})
		
		onShow(() => {
			let systemInfo = uni.getSystemInfoSync();
			state.systemInfos = systemInfo.version;
		})
		
		const logoutHandle = () => {
			uni.showModal({
				title: '提示',
				content: '确定退出登录吗？',
				async success({confirm}) {
					if(confirm){
						await logout()
						uni.showToast({
							title: '已退出登录',
							icon: 'success',
						}) 
						uni.clearStorage()
						uni.redirectTo({
							url: '/pages/login/index'
						})
					}
				}
			}) 
		}
		
		const setInfo = () => {
			uni.navigateTo({
				url: '/pages/myPackge/setting/setInfo'
			})
		}
		
		const aboutUs = () => {
			uni.navigateTo({
				url: '/pages/myPackge/about/about'
			})
		}
		
		const userAgreement = () => {
			uni.navigateTo({
				url: '/pages/myPackge/appInfo/userAgreement'
			})
		}
		
		const policy = () => {
			uni.navigateTo({
				url: '/pages/myPackge/appInfo/policy'
			})
		}
		
		const recharge = () => {
			uni.navigateTo({
				url: '/pages/myPackge/appInfo/rechargeAgreement'
			})
		}
		
		const setPaymentPwd = () => {
			uni.navigateTo({
				url: '/pages/myPackge/setting/setPayPwd'
			})
		}
		
		return {
			recharge,
			policy,
			userAgreement,
			aboutUs,
			setInfo,
			setPaymentPwd,
			logoutHandle
		}
	}
})
</script>

<style>page{ background-color: #f8f8fa;}</style>
<style lang="scss" scoped>
.setting-wrapper{
	margin: 24rpx;
	.setting-item{
		margin-bottom: 24rpx;
		.setting-content-item{
			padding: 24rpx 0;
		}
	}
	.logout-btn{ border-radius: 16rpx;}
}
</style>